import React, { Component } from "react";
import "./index.css";
import { createForm } from "rc-form";
import { Tabs, List, Switch, Checkbox } from "antd-mobile";
class SolutionPicker extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.showPicker);
    this.state = {
      show: false,
      checked: false,
      checked1: true,
    };
  }
  render() {
    const tabs = [
      { title: "起飞时段", sub: "0" },
      { title: "航空公司", sub: "1" },
      { title: "机场", sub: "2" },
      { title: "机型", sub: "3" },
      { title: "仓位", sub: "4" },
    ];
    const airCompData = [
      { value: 0, label: "Ph.D." },
      { value: 1, label: "Bachelor" },
      { value: 2, label: "College diploma" },
    ];
    const onChange = (val)=>{
        console.log(val)
    }
    const { getFieldProps } = this.props.form;
    return (
      <div
        className="picker"
        style={{ display: this.props.showPicker ? "" : "none" }}
      >
        <div className="button-header">
          <button onClick={this.props.cancle}>取消</button>
          <button onClick={this.props.cancle}>重置</button>
          <button onClick={this.props.cancle}>确定</button>
        </div>
        <div className="straigth">
          <span>仅直达</span>
          <div>
            <List.Item
              extra={
                <Switch
                  {...getFieldProps("Switch7", {
                    initialValue: true,
                    valuePropName: "checked",
                  })}
                  platform="ios"
                />
              }
            ></List.Item>
          </div>
        </div>
        <div style={{ height: "200px" }} className="tabs-items">
          <Tabs
            tabs={tabs}
            initialPage={0}
            tabBarPosition="left"
            tabDirection="vertical"
            style={{ height: "100px" }}
            onChange={(tab, index) => {
              console.log("onChange", index, tab);
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              Content of first tab
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              <List>
                {airCompData.map((i) => (
                  <Checkbox.CheckboxItem
                    key={i.value}
                    onChange={() => onChange(i.value)}
                  >
                    {i.label}
                  </Checkbox.CheckboxItem>
                ))}
              </List>
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              Content of third tab
            </div>
          </Tabs>
        </div>
      </div>
    );
  }
}

export default createForm()(SolutionPicker);
